<template>
  <div class="about">
    <el-container>
      <el-header>
        <div>
          <a href="/" title="微信读书书城" class="readerTopBar_home"></a>
          <input type="text" id="shousuo" placeholder="搜索">
          <a href="#" class="navBar_link_ink">墨水屏版 <span class="yans">|</span> </a> 
          <a href="#" class="navBar_link_Phone">手机版 <span class="yans">|</span> </a>
          <a href="javascript:;" class="navBar_link_Login">登录</a>
        </div>
      </el-header>
      <el-main>
        <div class="conent">
            <div class="readerBookInfo" v-for='(item,i) in hellolist'>
                <div class="top">
                  <a href="javascript:;"><img src="https://wfqqreader-1252317822.image.myqcloud.com/cover/142/23444142/t6_23444142.jpg" alt="书籍封面" width="137px" height="192px"></a>
                  <div class="right_cent">
                    <h2 class="bookInfo_title">{{item.name}}</h2>
                    <a href="" class="bookInfo_author">{{item.auth}}</a>
                    <a href="/web/category/all" target="_blank" class="bookInfo_rankList rankList_all"></a>
                    <div class="bookInfo_intro hasMore">
                       {{item.textarea}}
                    </div>
                  </div>
                </div>
                <div class="top1">
                  <a class="wr_btn">加入书架</a>
                </div>
            </div>
            <div class="readerBookInfo">
                <p class="reader_topReview_title">简介</p>
                <!-- <div class="review_starControl_container reader_topReview_starControl">
                  <p class="review_starControl_title" style="text-align: right;">为此书评分</p>
                  <p><el-rate v-model="value1"></el-rate></p>
                </div> -->
                <div class="reader_topReview_item" v-for='(item,i) in hellolpl'>
                  <div class="title">
                    <img src="https://res.weread.qq.com/wravatar/WV0015-modQJvl5~YBOwsGcZQw~k9b/96" class="wr_avatar_img" />
                    <span class="name">{{item.name}}</span>
                    <!-- <span class="action"></span>
                    <el-rate v-model="value1"></el-rate> -->
                  </div>
                  <br>
                  <p class="content_Normal">{{item.names}}</p>
                </div>


         
                <!-- <div class="reader_topReview_footer">
                  <a href="#" class="reader_topReview_more">查看更多精彩评论</a>
                </div> -->
            </div>

            <div class="readerBookInfo" v-for='(item,i) in hellolist'>
               <div class="conent">
                  <biaoti>版权信息</biaoti><br>
                  <p>书名:{{item.name}}</p>
                  <p>作者：{{item.auth}}</p>
                  <p>出版社：中信出版社</p>
                  <p>出版时间：{{item.time}}</p>
                  <p>版权所有·侵权必究</p>
                  <footer @click="booklst(item.id)">
                    <a  title="下一章">下一章</a>
                  </footer>
                </div>
            </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { setToken, setUserName } from "../../utils/auth";
import request from "../../utils/request";
export default {
  data(){
    return{
        hellolist: '',
        hellolpl: '',

    }
  },
   mounted() {
    // 加载列表
    this.getArticlelist();
    this.getArticlepl();
  },
  methods:{
    booklst(id){
      // alert(id)
      this.$router.push({path:"/article/list",query:{id:id}});
    },
    getArticlelist(){
      let id = this.$route.query.id;
        request({
          url: "/api/user/getHellolist",
          method: "post",
          data: {id}
        }).then(res => {
        console.log(res)
        this.hellolist = res.list
          
        });
    },
      getArticlepl(){
      let id = this.$route.query.id;
        request({
          url: "/api/user/getHellopl",
          method: "post",
          data: {id}
        }).then(res => {
        console.log(res)
        this.hellolpl = res.list
          
        });
    }
  }
}
</script>  
<style lang="less" scoped>
  // html{
  //   height: 100%;
  //   // background-color: #17181a;
  //   position: relative;
  // }

  .el-header{
    margin-top: -7px;
    width: 100%;
    height: 80px;
    border-bottom: 1px solid rgba(238,240,244,.1);
    background-color: #1f2022;
    position: fixed;
    z-index: 999;
  }

   .el-header>div{
    width: 49.5%;
    margin: auto;
    position: relative;
  }

  .readerTopBar_home {
    width: 117px;
    height: 48px;
    background: url(https://weread-1258476243.file.myqcloud.com/web/wrwebnjlogic/image/logo_small.45f3a627.png) no-repeat;
    background-repeat: no-repeat;
    display: block;
    margin: 12px 14px;
  }

  #shousuo {
    position: absolute;
    top:0px;
    left: 22%;
    border: none;
    flex: 1;
    height: 36px;
    padding: 0 40px;
    border-radius: 20px;
    font-size: 14px;
    background: url(https://weread-1258476243.file.myqcloud.com/web/wrwebnjlogic/image/icon_search.5731b0d1.png) no-repeat;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: rgba(246,246,249,.1);
    background-size: 20px 20px;
    background-position: 12px 8px;
    color: #4e5054;
  }

  .navBar_link_ink{
    position: absolute;
    top:6px;
    right: 15%;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    opacity: .7;
    text-decoration: none;
  }
  .yans{
    padding: 0px 12px;
  }
  .navBar_link_Phone{
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    opacity: .7;
    position: absolute;
    top:6px;
    right: 6%;
    text-decoration: none;
  }
  .navBar_link_Login{
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    opacity: .7;
    position: absolute;
    top:6px;
    right: 2%;
    text-decoration: none;
  }

  .el-main {
    width: 49%;
    margin: 40px auto;
    height: auto;
    border-bottom: 1px solid rgba(238,240,244,.1);
    background-color: #1f2022;
    position: relative;
  }

  .conent{
    width: 100%;
    height: 100%;
    font-size: 18px;
    color: #fff;
    opacity: .7;
    margin: 60px auto;
    text-align: left;
  }

  .readerBookInfo {
    margin-left: 72px;
    margin-right: 72px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border:1px solid red;
    border-radius: 0;
    border: solid hsla(0,0%,100%,.05);
    border-width: 0 0 1px;
  }
  .top{
    width: 100%;
    height:194px;
  }
  .right_cent{
    width: 75%;
    height:194px;
    float: right;
  }
  
  .bookInfo_title{
    margin-top: 0px;
  }

  .bookInfo_author{
    text-decoration: none;
    color: #0097ff;
  }

  .bookInfo_rankList.rankList_all {
    background-image: url(https://weread-1258476243.file.myqcloud.com/web/wrwebnjlogic/image/reader_ranklist_all.6409e284.png);
  }
  .bookInfo_rankList {
    margin-top: 16px;
    display: block;
    width: 98px;
    height: 28px;
    background-size: 98px 28px;
    background-repeat: no-repeat;
  }

  .bookInfo_intro {
    position: relative;
    margin-top: 17px;
    cursor: pointer;
    text-align: justify;
    color: #8a8c90;
    line-height: 25px;
    overflow: hidden;
    height: 50px;
    display: -webkit-box;
    display: -moz-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-text-size-adjust: none;
    box-orient: vertical;
    font-size: 14px;
  }

  .bookInfo_more {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
  }
  .bookInfo_more {
      margin-top: 20px;
      display: -webkit-box;
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      justify-content: space-between;
  }

  .top1{
    margin-top: 30px;
    width: 100%;
    height:70px;
    position: relative;
  }

  .right_foot{
    width: 24%;
    font-size: 28px;
  }
  .right_foot>.el-rate{
    float: right;
  }
  .bookInfo_more_line2 {
    margin-top: 8px;
    font-size: 13px;
    word-break: break-all;
    color: #8a8c90;
    line-height: 13px;
    overflow: hidden;
    height: 13px;
    display: -webkit-box;
    display: -moz-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -moz-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    -webkit-text-size-adjust: none;
    box-orient: vertical;
  }

  .cent_foot{
    width: 24%;
    position: absolute;
    left:40%;
    font-size: 28px;
    top:0px;
  }
  .cent_foot>span{
    font-size: 14px;
    padding-left: 5px;
  }

  .bookInfo_more_addShelf {
    align-self: center;
  }

 .wr_btn {
    position: absolute;
    right:6%;
    top:20px;
    display: inline-block;
    height: 30px;
    padding: 0 18px;
    line-height: 28px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    background: -webkit-gradient(linear,left top,right top,from(#0087fc),to(#28b7ff));
    background: linear-gradient(90deg,#0087fc,#28b7ff);
    border-radius: 14px;
    color: #fff!important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .reader_topReview_header {
    overflow: hidden;
    margin-bottom: 10px;
}
.reader_topReview_title {
    font-size: 20px;
    font-family: "SourceHanSerifCN-Bold",PingFang SC,-apple-system,SF UI Text,Lucida Grande,STheiti,Microsoft YaHei,sans-serif;
    color: #eef0f4;
}

.reader_topReview_starControl {
    margin-top: -60px;
    float: right;
}
.review_starControl_title {
    margin-bottom: 8px;
    font-size: 14px;
    color: #8a8c90;
}
.reader_topReview_item {
    margin-top: 50px;
    margin-bottom: 32px;
}
.title{
  width: 100%;
}
.title>img{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  float: left;
}
.name{
  font-size: 14px;margin: 0px 5px;
  float: left;
}
.action{
  font-size: 14px;margin: 0px 5px;
  float: left;
  color: #8a8c90;
}
.title>.el-rate{
 float: left;
}
.content_Normal{
  margin-top: 20px;
}

.reader_topReview_footer {
    border-radius: 0;
    border-width: 0 0 1px;
}
.reader_topReview_more{
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  color: #0097ff;
}


  .conent{
    width: 100%;
    height: 100%;
    font-size: 18px;
    color: #fff;
    line-height: 45px;
    margin: 60px auto;
    text-align: left;
  }

  .conent>biaoti{
    font-size: 28px;
    color: #fff;
    text-align: left;
  }

  .conent>footer{
    width: 100%;
    height:100px;
  }
  .conent>footer>a{
    display: block;
    width: 55%;
    height:50px;
    margin: 40px auto;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    background-color: hsla(0,0%,100%,.1);
    color: #fff;
    text-decoration: none;
  }
</style>